<template>
  <div class="problem clearfloat">
    <div>
      <div class="box">
        <div class="cascader">
          <i></i>
          <el-cascader
            v-model="value"
            :options="cate_list"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange"
            placeholder="フィルタ"
            popper-class="problem_select"
          ></el-cascader>
        </div>
        <div class="problem_list">
          <div class="problem_item" v-for="(item,index) in listInfo" :key="index">
            <h5>尋ねる：{{item.title}}</h5>
            <p>回答：</p>
            <p v-html="item.synopsis"></p>
          </div>
        </div>
        <div class="folding">
          <div
            v-for="(item,index) in cate_list"
            :key="index"
            :class="[{'folding_active':cate_index==index},'folding_item']"
            @click="onCateItem(index)"
          >{{item.title}}</div>
        </div>
      </div>
    </div>

    <div class>
      <el-pagination
        :page-size="10"
        :total="count"
        background
        layout="prev, pager, next"
        @current-change="pageSize"
        :current-page.sync="currentPage"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { problem_cate, problem_list } from "@/api/news.js";
export default {
  data() {
    return {
      count: 50,
      cate_list: [], //分类列表
      listInfo: [], //列表数据
      cate_index: 0, //当前选择分类索引
      currentPage: 1, //当前页数
      value: "" //移动端当前选择分类
    };
  },

  mounted() {
    problem_cate().then(res => {
      res.data.data.JAP.map(item => {
        item.value = item.id;
        item.label = item.title;
      });
      this.cate_list = res.data.data.JAP;
      // news_list(1：分页页数 ,4：限制个数 ， id :分类id)
      return this.getProblemList(1, 10, res.data.data.JAP[0].id);
    });
  },
  methods: {
    //筛选框改变
    handleChange(value) {
      this.currentPage = 1;
      this.getProblemList(1, 10, value[0]);
    },
    onCateItem(index) {
      this.currentPage = 1;
      this.cate_index = index;
      this.getProblemList(1, 10, this.cate_list[index].id);
    },
    pageSize(val) {
      this.currentPage = val;
      this.getProblemList(val, 10, this.cate_list[this.cate_index].id);
    },
    getProblemList(page, limit, cid) {
      problem_list({ page, limit, cid }).then(res => {
        if (res.data.data.length < 1) {
          return this.$message("これ以上データはありません");
        }
        this.count = res.data.count;
        // res.data.data.map(item=>{
        //   item.synopsis = item.synopsis.split("^");
        // })
        this.listInfo = res.data.data;
      });
    }
  }
};
</script>
<style scoped src="./sass/news.css"></style>